import React, { useEffect, useState,Key } from "react";
import { useParams,useNavigate } from "react-router-dom";
import { Card, Row, Col, Tree, Tag, Pagination, Table, Button } from "antd";
import type { DataNode, TreeProps } from "antd/es/tree";
import { IdepList,IbookScheduleList,IScheduleList } from "@api/user/hospital/model/hospitalListTypes";
import { reqHospitalSchedulDep, regHospitalScheduleRule, reqHospitalScheduleList, } from "@api/user/hospital/hospitalList";
import { stringify } from "querystring";

const treeData: DataNode[] = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        disabled: true,
        children: [
          {
            title: "leaf",
            key: "0-0-0-0",
            disableCheckbox: true,
          },
          {
            title: "leaf",
            key: "0-0-0-1",
          },
        ],
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
        children: [
          {
            title: <span style={{ color: "#1890ff" }}>sss</span>,
            key: "0-0-1-0",
          },
        ],
      },
    ],
  },
];

const columns = [
  {
    title: "序号",
    render(a:any,b:any,index:number){
      return index+1
    }
  },
  {
    title: "职称",
    dataIndex:'title'
  },
  {
    title: "职称",
    dataIndex:'title'
  },
  {
    title:'号源时间',
    dataIndex:'workDate'
  },
  {
    title:'可预约数',
    dataIndex:'availableNumber'
  },
  {
    title: '剩余预约数',
    dataIndex:'reserveNumber'
  },
  {
    title:'挂号费(元)',
    dataIndex:'amount'
  },
  {
    title:'擅长技能',
    dataIndex:'skill'
  },
];

let depcode: Key
export default function HospitalSchedule() {
  const  hoscode  = useParams().hoscode as string;

  const [deplist, setdeplist] = useState<IdepList>([]);
  const [depCodeList, setDepCodeList] = useState<string[]>([])
  const navigate= useNavigate()
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(50)
  const [scheduleRules, setScheduleRules] = useState<IbookScheduleList>([])
  const [scheduleList, setScheduleList] = useState<IScheduleList>([])


 //选择用到的状态
 const [hosname, setHosname] = useState('')
 const [depname, setDepname] = useState('')
 const [workDate, setWorkDate] = useState('')




useEffect(()=>{
   async function fetch(){
      const result=await getDepList()
      const depcode=result[0].children[0].depcode
      getScheduleRules(page,pageSize,depcode)

   }
     
fetch()

},[])

  // 获取排班规则的数据
  const  getScheduleRules=async ( page: number,
    pageSize: number,
    depcode:Key)=>{
      const result= await regHospitalScheduleRule({
              page,
              limit: pageSize,
              hoscode,
              depcode,
            })
            // console.log(result)
            setScheduleRules(result.bookingScheduleList)
            setTotal(result.total)
            setHosname(result.baseMap.hosname)
            // setWorkDate(result.bookingScheduleList[0].workDate)
             // 修改workDate
    setWorkDate(
      result.bookingScheduleList[0] && result.bookingScheduleList[0].workDate
    )
    return (
      result.bookingScheduleList[0] && result.bookingScheduleList[0].workDate
    )
  }

  // 获取排班列表的数据
  const getScheduleList = async (workDate: string) => {
    const result = await reqHospitalScheduleList(hoscode, depcode, workDate)
    // console.log(result)
    setScheduleList(result)
  }


 // 选择树结构中某个节点,会触发这个函数
 const onSelect: TreeProps['onSelect'] = async (selectedKeys, info) => {
  // console.log('selected', selectedKeys, info)
  // 修改全局的depcode
  depcode = selectedKeys[0]

  const workDate = await getScheduleRules(1, pageSize, depcode)
  // 选择其他科室清楚上一个科室表格数据
  setScheduleList([])
  getScheduleList(workDate)
}









async function getDepList(){
  // debugger
const result =await reqHospitalSchedulDep(hoscode as string )

const depCodeList=result.map((item)=>{
  return item.depcode
})
result.forEach((item)=>{
  return  item.disabled=true
})
setDepCodeList(depCodeList)
setdeplist(result)

setDepname(result[0].children[0].depname as string)
return result



// console.log(depCodeList)
}



  // const onSelect: TreeProps["onSelect"] = (selectedKeys, info) => {
  //   console.log("selected", selectedKeys, info);
  // };

  const treeContainerHeight = document.body.clientHeight - 64 - 34 - 24 * 2 - 22 - 14

  return (
    <Card>
      <p>{hosname} / {depname} / {workDate}</p>
      {/* 是antd中的栅格系统(Grid), Row表示一行, Col表示一列. Col的span表示这一类在一行中占多少份. 一行是24份 */}
      {/* gutter表示一行中,每一列之间的间隔.单位是px */}
      <Row gutter={20}>
        <Col span={5}>
          <div style={{ border: "1px solid #ccc", height: treeContainerHeight,overflow:"auto" }}>
            <Tree
              onSelect={onSelect} // 点击树结构中的某一个节点会触发的函数
          
              treeData={deplist as []}  // treeData表示树结构中展示的数据
              fieldNames={{
                  title:'depname',
                  key:'depcode'

              }}
                expandedKeys={depCodeList}
            />
          </div>
        </Col>
        <Col span={19}>
          <div>
          {scheduleRules.map((item) => {
              return (
                <Tag key={item.workDate} color={item.workDate === workDate ? 'green' : ''}
                    onClick={
                      ()=>{
                        setWorkDate(item.workDate)
                        getScheduleList(item.workDate)
                      }
                    }
                
                >
                  <div>
                    {item.workDate} {item.dayOfWeek}
                  </div>
                  <div>
                    {item.availableNumber} / {item.reservedNumber}
                  </div>
                </Tag>
              )
            })}
          </div>
          <Pagination
          current={page}
          pageSize={pageSize}
            total={total}
            showSizeChanger={true}
            style={{ marginTop: 10, marginBottom: 10 }}
                onChange={(page,pageSize)=>{
                  setPage(page)
                  setPageSize(pageSize)
                  getScheduleRules(page,pageSize,depcode)
                }}


          ></Pagination>

          <Table columns={columns} bordered
           dataSource={scheduleList}
           pagination={false}
           rowKey={'id'}
          
          
          
          ></Table>
          <Button style={{ marginTop: 20 }} onClick={
            ()=>{  navigate(-1)      }
          }>返回</Button>
        </Col>
      </Row>
    </Card>
  );
}
